const webpack = require('webpack');
const path = require('path');
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminPngquant = require('imagemin-pngquant');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //根据模板生成最终html文件

module.exports = {
  entry: {
    app: './index.js',
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist'),
    chunkFilename: '[name].[chunkhash:5].chunk.js',
    publicPath: '/'
  },

  resolve: {
    modules: ['node_modules', path.join(__dirname, 'node_modules')],
    extensions: ['*', '.web.js', '.js', '.json'],
  },

  context: path.join(__dirname, 'src'),

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query:{
          "presets": [
            ["es2015", {"modules": false}], "stage-2", "react"
          ],
          "plugins": [
            ["import", [
              { "style": "css", "libraryName": "antd" },
              { "style": "css", "libraryName": "antd-mobile" }
            ]]

          ]

        }
      },
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
        ],
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'less-loader'
        ]
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        loader: 'url-loader?limit=8192'
      }, {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff"
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "file-loader"
      }
    ],
  },

  plugins: [

    //jquerys
    new webpack.ProvidePlugin({
      $:"jquery",
      jQuery:"jquery",
      "window.jQuery":"jquery"
    }),

    //切换生产环境
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),

    //压缩图片
    imageminMozjpeg({
      quality: 100,
      progressive: true
    }),
    imageminPngquant({
      quality: '65-90'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'commons', // 这公共代码的chunk名为'commons'
      filename: '[name].bundle.js', // 生成后的文件名，虽说用了[name]，但实际上就是'commons.bundle.js'了
      minChunks: 4, // 设定要有4个chunk（即4个页面）加载的js模块才会被纳入公共代码。这数目自己考虑吧，我认为3-5比较合适。
    }),
    // 此插件详细教程 http://www.cnblogs.com/haogj/p/5160821.html
    new HtmlWebpackPlugin({  //根据模板插入css/js等生成最终HTML
      filename: './index.html', //生成的html存放路径，相对于（比如前面配置的BUILD_PATH是“build/dist”,即index.html会生成到build下，其他文件会打包到build/dist下）
      template: './template/index.html', //html模板路径
      hash: false, // true | false。如果是true，会给所有包含的script和css添加一个唯一的webpack编译hash值。这对于缓存清除非常有用。
      inject: true,     // | 'head' | 'body' | false  ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
    }),

    // 压缩时去掉js所有注释，包括copyright信息
    new webpack.optimize.UglifyJsPlugin({
      output: {
        comments: false,  // remove all comments
      },
      compress: {
        warnings: false
      },
      except: ['$super', '$', 'exports', 'require']    //排除关键字
    })
  ],
};